<!-- 模板 -->
<template>
  <div class="">
    <input type="text" v-model="msg" />
    <div>{{ msg }}</div>
    <el-button
      @click="dest()"
      type="warning"
      size="mini"
      icon="el-icon-delete"
    ></el-button>
    <!-- 显示大于3数组元素 -->
    <div>大于3数组元素:{{ arr | getEl }}</div>
    <!-- 过滤器链 -->
    <div>对指定的数据+1再拼接字符串:{{ price | add(1) | concat('$') }}</div>
    <!-- 计算属性的使用虽然是函数，但插值表达式一定不能加(),否则报错 -->
    <div>年龄最大的对象:{{ getMaxAge.name }}</div>
    <div>分数最大的对象:{{ getMaxScore.name }}</div>
    <div>{{ date | dateFormate() }}</div>
  </div>
</template>

<script>
import { request } from '../utits/request.js'
export default {
  name: '',
  data() {
    return {
      msg: '动态效果',
      list: [],
      arr: [1, 2, 3, 4, 5],
      price: 100,
      students: [
        { id: 1, name: 'tom1', score: 97, age: 21 },
        { id: 2, name: 'tom2', score: 99, age: 22 },
        { id: 3, name: 'tom3', score: 98, age: 20 },
        { id: 4, name: 'tom4', score: 100, age: 19 }
      ],
      date: '',
      id: 0
    }
  },
  props: [],
  components: {},
  // vue的计算属性，可以对data中的数据进行重新计算
  computed: {
    getMaxAge() {
      let arr = this.students
      let stu = arr[0]
      for (let i = 0, n = arr.length; i < n; i++) {
        if (arr[i].age > stu.age) {
          stu = arr[i]
        }
      }
      return stu
    },
    getMaxScore() {
      let arr = this.students
      let stu = arr[0]
      for (let i = 0, n = arr.length; i < n; i++) {
        if (arr[i].score > stu.score) {
          stu = arr[i]
        }
      }
      return stu
    }
  },
  //过滤器
  filters: {
    getEl(args) {
      let arr = args.filter(item => item > 3)
      return arr
    },
    /**
     * 对目标参数加1的过滤器函数
     * @date 2021-03-08
     * @param {any} args 目标参数是管道符前面的变量
     * @param {any} num 函数再过滤器中传递的参数
     * @returns {any} 计算后的数据
     */
    add(args, num) {
      return args + num
    },
    concat(args, code) {
      // code=$ args=101
      // $101
      return code + args
    }
  },
  methods: {
    runDate() {
      if (this.id) {
        clearInterval(this.id)
      }
      let _this = this
      this.id = setInterval(function() {
        _this.date = new Date()
      }, 1000)
    },
    dest() {
      this.$destroy()
    },
    async getGoodsList() {
      let option = {
        url: 'https://web17.oss-cn-hangzhou.aliyuncs.com/list.json',
        method: 'get'
      }
      let { data: res } = await request(option)
      this.list = res
    }
  },
  // beforeCreate() {
  //   console.log(this)
  //   console.group('----------beforeCreate----------')
  //   console.log(this.$el)
  //   console.dir(this.$data)
  //   console.log('msg=' + this.msg)
  // },
  created() {
    //在vue实例创建结束时，开始加载数据
    this.getGoodsList()
    // console.group('----------created----------')
    // console.log(this.$el)
    // console.log(this.$data)
    // console.log('msg=' + this.msg)
  },
  mounted() {
    this.runDate()
    console.group('----------mounted----------')
    console.log(this.$el)
    console.log(this.$data)
    console.log('msg=' + this.msg)
  }
  // beforeMount() {
  //   console.group('----------beforeMount----------')
  //   console.log(this.$el)
  //   console.log(this.$data)
  //   console.log('msg=' + this.msg)
  // },
  // beforeUpdate() {
  //   console.group('----------beforeUpdate----------')
  //   console.log(this.$el)
  //   console.log(this.$data)
  //   console.log('msg=' + this.msg)
  // },
  // updated() {
  //   console.group('----------udpdated----------')
  //   console.log(this.$el)
  //   console.log(this.$data)
  //   console.log('msg=' + this.msg)
  // },
  // beforeDestroy() {
  //   console.group('----------beforeDestroy----------')
  //   console.log(this.$el)
  //   console.log(this.$data)
  //   console.log('msg=' + this.msg)
  // },
  // destroyed() {
  //   console.group('----------destroyed----------')
  //   console.log(this.$el)
  //   console.log(this.$data)
  //   console.log('msg=' + this.msg)
  // }
}
</script>

<style lang="less" scoped></style>
